import React, { Component } from "react";
import { NavBar, Toast } from "antd-mobile";

import {
  get_Current_CityData, // 获取当前城市信息
  get_House_List, // 根据市id，区id，镇id获取其下一层房源信息
  get_House_List_By_CityID, //根据小区id获取到房源详细信息
} from "../../utils/http_biz";
import "./map.scss";
import { BASE_URL } from "../../utils/url";

const BMap = window.BMap;

/*
  绘制当前区下面的所有镇的房源数据步骤：
  1、在区的标记物上注册一个click事件
  2、在事件里边请求服务器传入当前的区id，获取旗下的所有镇的房源数据
  3、清除该地图上区的所有房源标记物
  4、在地图上绘制出镇房源数据标记物
*/
const AREA = {
  level: "区",
  scan: 11,
};

const TON = {
  level: "镇",
  scan: 13,
};

const SMALLAREA = {
  level: "小区",
  scan: 15,
};

class Map extends Component {
  state = { show: "", houseList: [] };
  // level分为三大级别： 区、镇、小区   ,地图的放大级别： 区：11，镇：13，小区：15
  curLevel = AREA;

  async componentDidMount() {
    //   初始化地图
    this.renderMap();

    //   2.0 获取房源数据(当前城市的房源)
    let { value } = await get_Current_CityData();
    let body = await this.getHouseData(value);

    //3.0 根据房源数据进行数据渲染
    setTimeout(() => {
      this.renderHouse(body);
    }, 100);
  }

  // 1.0 获取到每一级别的房源数据
  //   value:代表的是当前城市/区/镇的id
  // 此方法要请求的数据接口：/area/map
  async getHouseData(value) {
    let parmas = { id: value };
    console.log("parmas=", parmas);

    let { body } = await get_House_List(parmas);
    return body;
  }

  // 2.0 定义一个渲染房源数据的方法（本质上就是在地图上创建一个个的标记物）
  renderHouse(body) {
    //   1.0 由于body是一个数组，所以应该遍历这个数组再一一创建标记物
    // var point = new BMap.Point(113.333773, 23.148354);
    // var opts = {
    //   position: point, // 指定文本标注所在的地理位置
    //   offset: new BMap.Size(30, -30), //设置文本偏移量
    // };
    // var label = new BMap.Label(
    //   "欢迎使用百度地图，这是一个简单的文本标注哦~",
    //   opts
    // ); // 创建文本标注对象
    // label.setStyle({
    //   color: "red",
    //   fontSize: "12px",
    //   height: "20px",
    //   lineHeight: "20px",
    //   fontFamily: "微软雅黑",
    // });
    // // 给label设定自定义html结合和样式
    // label.setContent(`
    // <div class="bubble">
    //     <p class="name">天河</p>
    //     <p>100套</p>
    // </div>
    // `);

    // // 添加到地图
    // setTimeout(() => {
    //   this.map.addOverlay(label);
    // }, 1000);
    body.forEach((item) => {
      /*item的格式：
        {
        "label": "朝阳",
        "value": "AREA|69cc5f6d-4f29-a77c",
        "coord": {
            "latitude": "39.912338",
            "longitude": "116.449979"
        },
        "count": 564
        }
      */
      //   console.log(item.coord);
      var opts = {
        position: new BMap.Point(item.coord.longitude, item.coord.latitude), // 指定文本标注所在的地理位置
        offset: new BMap.Size(30, -30), //设置文本偏移量
      };
      var label = new BMap.Label("ddd", opts);
      label.setStyle({
        color: "red",
        fontSize: "12px",
        height: "20px",
        lineHeight: "20px",
        fontFamily: "微软雅黑",
        border: "none",
        backgroundColor: "transparent",
      });
      // 给label设定自定义html结合和样式
      // 如果当前渲染的是区和镇的话，则渲染一个圆圈圈的标记物，否则就渲染一个长方形的标记物
      if (this.curLevel.level === "小区") {
        label.setContent(`
            <div class="rect">
            <span class="housename">${item.label}</span>
            <span class="housenum">${item.count}套</span>
            <i class="arrow"></i>
    </div>
            `);
      } else {
        label.setContent(`
            <div class="bubble">
                <p class="name">${item.label}</p>
                <p>${item.count}套</p>
            </div>
            `);
      }

      // 给label注册点击事件
      label.addEventListener("click", () => {
        // alert(item.value + "=" + item.label);
        //   获取区id：item.value
        // 3、清除该地图上区的所有房源标记物
        if (this.curLevel.level === "小区") {
          // 这里执行点击小区覆盖物后的逻辑代码
          // 让房源信息div通过过渡的形式展示出来
          this.setState({ show: "show" });

          // 获取当前校区的所有房屋信息渲染到房屋列表上
          get_House_List_By_CityID({ cityId: item.value }).then(
            ({ body: { list } }) => {
              console.log("list==>", list);
              this.setState({ houseList: list });
            }
          );

          // 给地图对象注册一个移动事件
          this.map.addEventListener("movestart", () => {
            //   将房屋列表div上的show这个类名移除
            this.setState({ show: "" });
          });
        } else {
          this.map.clearOverlays();
          this.map.centerAndZoom(
            new BMap.Point(item.coord.longitude, item.coord.latitude),
            this.curLevel.scan == 11 ? 13 : 15
          );

          //   添加一个正在请求数据中的提示
          Toast.loading("房源数据正在加载中....", 0);
          // 2、在事件里边请求服务器传入当前的区id，获取旗下的所有镇的房源数据
          this.getHouseData(item.value).then((datas) => {
            // 当服务器响应回来数据以后，关闭正在加载中的提示
            Toast.hide();
            // 4、在地图上绘制出镇房源数据标记物
            this.renderHouse(datas);
          });
        }

        //   当事件触发的时候判断this.curLevel中的level表示区，就改成镇
        if (this.curLevel.level === "镇") {
          this.curLevel = SMALLAREA;
        }

        if (this.curLevel.level === "区") {
          this.curLevel = TON;
        }
      });

      // 将label添加到地图
      this.map.addOverlay(label);
    });
  }
  // 定义一个map的成员属性，用于保存map地图的对象
  map = null;

  renderMap = async () => {
    // 百度地图API功能
    var map = new BMap.Map("maparea");
    //   把map对象添加到当前组件的state中，作为一个状态数据管理
    this.map = map;
    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();
    // 将地址解析结果显示在地图上,并调整地图视野
    //  获取到当前城市
    let { label } = await get_Current_CityData();
    // console.log(label);
    myGeo.getPoint(
      label,
      function (point) {
        //   point中有当前城市的经纬度信息
        if (point) {
          //   console.log(point);
          map.centerAndZoom(point, 11);
          map.addOverlay(new BMap.Marker(point));

          // 添加缩放控件和标尺控件
          map.addControl(new BMap.NavigationControl());
          map.addControl(new BMap.ScaleControl());
        } else {
          alert("您选择地址没有解析到结果!");
        }
      },
      label
    );
  };

  render() {
    return (
      <div className="map">
        {/* 0.0 导航条 */}
        <NavBar
          mode="light"
          icon={<i className="iconfont icon-back"></i>}
          onLeftClick={() => {
            this.props.history.go(-1);
          }}
        >
          地图找房
        </NavBar>
        {/* 1.0 渲染地图 */}
        <div id="maparea"></div>

        {/* 2.0 小区房源信息列表html结构 */}
        <div className={"houseList " + this.state.show}>
          {/* 头部区域 */}
          <div className="titleWrap">
            <h1 className="listTitle">房屋列表</h1>
            <a className="titleMore" href="/home/index">
              更多房源
            </a>
          </div>

          <div className="houseItems">
            {/* 内容区域-遍历 */}
            {this.state.houseList.length > 0 &&
              this.state.houseList.map((item) => (
                <div
                  className="house"
                  onClick={() =>
                    this.props.history.push(`/houseinfo/${item.houseCode}`)
                  }
                >
                  <div className="imgWrap">
                    <img
                      className="img"
                      src={BASE_URL + item.houseImg}
                      alt=""
                    />
                  </div>
                  <div className="content">
                    <h3 className="title">{item.title}</h3>
                    <div className="desc">{item.desc}</div>
                    {/*  // 索引号：   0 1 2 3
                    // 对应类：tag1 2 3
                    // tagClass => tag1 / tag2 / tag3 */}
                    <div>
                      <span className="tag tag1">公寓</span>
                      <span className="tag tag2">近地铁</span>
                    </div>
                    <div className="price">
                      <span className="priceNum">{item.price}</span> 元/月
                    </div>
                  </div>
                </div>
              ))}
          </div>
        </div>
      </div>
    );
  }
}

export default Map;
